<template>
    <el-input v-model="formName" placeholder="房源名称" />
    <el-input v-model="formAddr" placeholder="房源地址" />
    <el-button type="primary" @click="addHouse">添加房源</el-button>
    <el-button type="primary" @click="updateHouse">更新房源</el-button>

    <el-table :data="houseData" @row-click="rowClick">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="houseName" label="房源名称" width="180" />
    <el-table-column prop="houseAddr" label="房源地址" />
    <el-table-column prop="optUid" label="创作者ID" />
  </el-table>
</template>

<script setup>

import { ref, onMounted } from 'vue'
import httpRequest from '@/request/index'

const formName = ref('')
const formAddr = ref('')
const formId = ref()

const houseData = ref([])

function rowClick(row) {
    formName.value = row.houseName
    formAddr.value = row.houseAddr
    formId.value = row.id
}

function addHouse() {
    httpRequest({
        url: '/house/house/resource/add',
        method: 'post',
        data: {
            houseName: formName.value,
            houseAddr: formAddr.value
        }
    }).then((res) => {
        if (res.code === 0) {
            getList();
        }
    })
}

function updateHouse() {
    httpRequest({
        url: '/house/house/resource/update',
        method: 'post',
        data: {
            houseName: formName.value,
            houseAddr: formAddr.value,
            id: formId.value
        }
    }).then((res) => {
        if (res.code === 0) {
            getList();
        }
    })
}

function getList() {
    httpRequest({
        url: '/house/house/resource',
        method: 'get',
    }).then((res) => {
        if (res.code === 0) {
            houseData.value = res.data
        }
    })
}

onMounted(() => {
    getList()
})
</script>